VnBootsTrap Sharing for all

Trang chủ » Posts filed under Blogspot Tips

chia header làm 2 phần, một bên logo và 1 bên quảng cáo

Bài viết hướng dẫn các bạn chia Header của blogspot ra làm 2 phần với kích thước tùy chỉnh. Khi online tìm kiếm thủ thuật các bạn hay gặp các blogger hiện nay hay làm header dạng 2 cột cột trái để logo còn cột phải là banner quảng cáo.

Chúng ta cùng nhìn lại đoạn code header của chúng ta trong bài viết trước. Nó sẽ như sau:

<div class='header'>
<b:section class='Header' id='Header' showaddelement='yes'>
<b:widget id='Header1' locked='false' title='Bài 3 - trong huong dan thiet ke tempalte (Tiêu đề)' type='Header' visible='true'/>
</b:section>
</div>

Bây giờ, để có thể chia nó thành 1 phần thì chúng ta sẽ cần tới 2 thẻ div và hai class/id riêng cho mỗi cái. Mình sẽ chọn 2 class là header-trai và header-phai. Cái header-trai sẽ chứa tên trang web, còn cái header-phai sẽ chứa phần bạn chèn thêm sau này.

Như vậy, chúng ta sẽ được đoạn code như sau:

<div class='header'>
<div class='header-trai'>
<b:section class='Header' id='Header' showaddelement='yes'>
<b:widget id='Header1' locked='false' title='Bài 3 - trong huong dan thiet ke tempalte (Tiêu đề)' type='Header' visible='true'/>
</b:section>
</div>
<div class='header-phai'>
Đây là phần nội dung của header-phai
</div>
</div>

Để thuận tiện hơn trong việc chỉnh sửa nội dung của header-phai. Ta sẽ thêm cho nó 1 thẻ b:section. Vậy chức năng của thẻ b:section là gì? Thẻ này sẽ giúp chúng ta có thể thêm được các widget tùy ý ngay trong phần quản lý bố cục mà không cần đụng tới code nữa.
Và như vậy mình sẽ lại có đoạn code như sau:

<div class='header'>
<div class='header-trai'>
<b:section class='Header' id='Header' showaddelement='yes'>
<b:widget id='Header1' locked='false' title='Bài 3 - trong huong dan thiet ke tempalte (Tiêu đề)' type='Header' visible='true'/>
</b:section>
</div>
<div class='header-phai'>
<b:section class='ben-phai' id='ben-phai' showaddelement='yes'/>
</div>
</div>

OK, bây giờ chúng ta thay đoạn code trên cho đoạn code header của bài viết trước và lưu lại. Quay về quản lý bố cục thì chúng ta sẽ thấy như hình dưới:

Bây giờ, việc của chúng ta là viết CSS cho 2 class này để sao cho mỗi cái nằm 1 bên là được. Và đây là đoạn CSS của mình!

.header-trai {
width: 30%;
float: left;
}
.header-trai img {
max-height: 60px;
width:auto;
}
.header-phai {
width: 70%;
float: right;
}

Chúc các bạn thành công!
Lưu ý: chỉnh số % tùy ý nếu bạn muốn miễn sao là trái + phải <=100%

Một số thẻ điều kiện if trong Blogger

Dưới đây là 1 số thẻ điều kiện if trong Blogger mà mình biết được. Nếu như thiếu cái nào thì các bạn bổ sung giúp mình trong phần Comment nhé!

1. Thẻ điều kiện cho trang chủ, trang search label, trang archive:

<b:if cond='data:blog.pageType == "index"'>

2. Thẻ điều kiện cho bài viết.

<b:if cond='data:blog.pageType == "item"'>

3. Thẻ điều kiện cho trang tĩnh:

<b:if cond='data:blog.pageType == "static_page"'>

4. Thẻ điều kiện cho trang lưu trữ:

<b:if cond='data:blog.pageType == "archive"'>

5. Thẻ điều kiện cho trang chủ:

<b:if cond='data:blog.url == data:blog.homepageUrl'>

6. Thẻ điều kiện cho URL nhất định:

<b:if cond='data:blog.url == "URL nhất định"'>

7. Thẻ điều kiện cho Page và Post:

<b:if cond='data:blog.url == data:post.url'>

8. Thẻ điều kiện cho tất cả Label:

<b:if cond='data:blog.searchLabel'>

9. Thẻ điều kiện cho Label nhất định

<b:if cond='data:blog.searchLabel == "Tên nhãn"'>

10. Hiển thị nội dung cho bài viết đầu tiên tại trang chủ

<b:if cond='data:post.isFirstPost'>

11. Thẻ điều kiện cho mobile:

<b:if cond='data:blog.pageType == "data:blog.isMobile"'>

12. Thẻ điều kiện cho trang báo lỗi 404

<b:if cond='data:blog.pageType == "error_page"'>

13. Không hiện trang chủ

<b:if cond='data:blog.url != data:blog.homepageUrl'>

14. Điều kiện hiện ở tìm kiếm

<b:if cond='not data:blog.searchQuery'>
<b:else/>
// Nội dung hiển thị trên trang tìm kiếm
</b:if>

Bên trên là các thẻ điều kiện đúng, tức là nếu là A thì sẽ xảy ra B. Nhưng chúng ta cũng còn 1 loại điều kiện khác là điều kiện phủ định. Tức là nếu không phải là A thì sẽ xảy ra B.

Vậy, câu lệnh của hai loại điều kiện này khác nhau như thế nào, hay là cách sử dụng hai loại này có gì khác nhau. Câu trả lời rất đơn giản. Các bạn hãy để ý ở đoạn == trong các loại điều kiện mình đã nêu và != trong ví dụ đầu bài bạn sẽ nhận ra ngay sự khác nhau.

Ví dụ:

Điều kiện đúng:

<b:if cond='data:blog.pageType == "index"'>

Điều phủ định:

<b:if cond='data:blog.pageType != "index"'>

Tìm hiểu thuộc tính showaddelement trong section

Trong blogspot các tiện ích HTML được chứa trong cặp thẻ b:section có dạng như bên dưới:

<b:section id='tên id' class='tên class' maxwidgets='số lượng' showaddelement='no'>
Các tiện ích Widget
</b:section>

Trong đó:

Mỗi b:section quy định là một khối bố cục thông qua các thuộc tính id như: header, sidebar, main, footer,... bạn có thể di chuyển và thêm các wiget (tiện ích) giữa các khối này.

showaddelement='yes' tức là cho phép bạn thêm một wiget ,tiện ích vào phần bố cục section của bạn.

Tuy nhiên trong một số trường hợp người thiết kế lại để là showaddelement='no' do vậy bạn phải điều chỉnh lại thànhshowaddelement='yes' để có thể thêm tiện ích vào trong thẻ b:section trên.

Tìm hiểu thuộc tính locked của thẻ b:widget

Thẻ b:widget chính là một phần tử con của b:section, nó có thể là một tiện ích HTML, popularposts,... nói chung là tất cả những gì bạn có thể thêm trong phần Bố cục. Mình lấy ví dụ với tiện ích HTML1 có dạng như sau:

<b:widget id='HTML1' locked='false' title='Tên tiện ích' type='HTML'/>

Trong đó:

Trong blog các tiện ích được phân biệt với nhau bởi id như: Popularpost1, HTML1,....
type: Bao gốm các dạng sau : BlogArchive, Blog, Feed, Header, HTML, SingleImage, LinkList,List, Logo, BlogProfile, Navbar,VideoBar, NewsBar, ListView ....

Trong đó HTML được chúng ta sử dung nhiều nhất.

locked: Quy định bạn có thể di chuyển các tiện ích giữa 2 thẻ b:section như từ footer lên header, nếu bạn không thể di chuyển các tiện ích trong phần bố cục thì tức là locked đang để ở chế độ locked='false' hoặc locked='no'

Tìm hiểu thêm:

Mỗi phần trong chủ đề của bạn có các thẻ mở và đóng giống như sau:

<b:section id='header' class='header' maxwidgets="1" showaddelement="no">
</b:section>

Phần chỉ có thể chứa các tiện ích. Để chèn thêm mã vào phần, hãy tách phần thành hai hoặc nhiều phần mới.

Tiện ích được biểu thị bởi một thẻ, thẻ này là một trình giữ chỗ cho biết cách tiện ích được xử lý trong tab Phần tử trang.

Dưới đây là một số ví dụ về tiện ích (một cho tiêu đề trang và một cho danh sách):

<b:widget id="header" type='HeaderView' locked="yes"/>
<b:widget id="myList" type='ListView' locked="no" title="My Favorite Things"/>
<b:widget id=”BlogArchive1” locked=”false” mobile=”yes” title=”Blog Archive” type=”BlogArchive”/>

Hướng dẫn tạo bình luận cho blogger mới nhất với Avatar bo tròn

Bài viết hướng dẫn các bạn tạo Recent comment mới nhất với biểu tượng Avatar bo góc đẹp. Các bạn làm theo hướng dẫn bên dưới nhé

Bước 1: Đăng nhập vào Blogger - Bố cục thêm tiện ích - HTML & Java Script

Bước 2: Copy đoạn code bên dưới dán vào và sửa nội dung tiêu đề cho phù hợp cũng như thay thế đường link thành đường link của Blog bạn nhé.

<h2>Bình luận mới nhất</h2>
<style>
ul.idbcomments{list-style:none;margin:0;padding:0}.idbcomments li{display:block;clear:both;overflow:hidden;list-style:none;border-bottom:0!important;word-break:break-all;padding:8px 0!important}.idbcomments li .avatarImage{float:left;margin-right:10px;position:relative;overflow:hidden}.idbcomments li img{border-radius:100%;position:relative;overflow:hidden;display:block;width:42px;height:42px}.idbcomments li a{font-weight:700}.idbcomments li span{margin-top:2px;color:#666;display:block;font-size:12px;line-height:1.4}
</style>
<script type="text/javascript">
//<![CDATA[
// Recent Comments by Pc8x
function idbcomments(a){var e;e='<ul class="idbcomments">';for(var t=0;numComments>t;t++){var r,o,n,i;if(t==a.feed.entry.length)break;e+="<li>";for(var d=a.feed.entry[t],s=0;s<d.link.length;s++)"alternate"==d.link[s].rel&&(r=d.link[s].href);for(var l=0;l<d.author.length;l++)o=d.author[l].name.$t,n=d.author[l].gd$image.src;n=-1!=n.indexOf("/s1600/")?n.replace("/s1600/","/s"+avatarSize+"-c/"):-1!=n.indexOf("/s220/")?n.replace("/s220/","/s"+avatarSize+"-c/"):-1!=n.indexOf("/s512-c/")&&0!=n.indexOf("http:")?"http:"+n.replace("/s512-c/","/s"+avatarSize+"-c/"):-1!=n.indexOf("blogblog.com/img/b16-rounded.gif")?"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8irQJOLWe3e0etN8VoBoP7k807CJSuHql3E_PKAgI1IuN2X-qJ0corcrXOu0gYqIcQ708oEI_nO3oopRLnzu02DP_phvEvepgTKTztAdMShxPPqA3BTXzVox6zSoLRGN_lx7DJTL2aj1l/"+avatarSize+"/blogger.png":-1!=n.indexOf("blogblog.com/img/openid16-rounded.gif")?"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgDRtyU38qlwGt_C9Xsc-eYkx6lIr-JCjAC_6O8rDTr8j0riBQnSqlA_ECVZ-kh3p_4io8OMrE81Nh3D46ERnytQKo9aY3nNEhIbH8GEEvCcYkILOaPxtbXfs5ewzjR52RTjZ1PfxhkRTC/"+avatarSize+"/openid.png":-1!=n.indexOf("blogblog.com/img/blank.gif")?-1!=defaultAvatar.indexOf("gravatar.com")?defaultAvatar+"&s="+avatarSize:defaultAvatar:n,1==showAvatar&&(i=1==roundAvatar?"avatarRound":"",e+='<div class="avatarImage '+i+'"><img class="'+i+'" src="'+n+'" alt="'+o+'" width="'+avatarSize+'" height="'+avatarSize+'"/></div>'),e+='<a href="'+r+'">'+o+"</a>";var A=d.content.$t,v=A.replace(/(<([^>]+)>)/gi,"");""!=v&&v.length>characters?(v=v.substring(0,characters),v+="…",1==showMorelink&&(v+='<a href="'+r+'">'+moreLinktext+"</a>")):v=v,e+="<span>"+v+"</span>",e+="</li>"}e+="</ul>";var c="";0==hideCredits&&(c="display:block;"),e+="",document.write(e)}var numComments=7,showAvatar=!0,avatarSize=42,roundAvatar=!0,characters=40,showMorelink=!1,defaultAvatar="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX6bMs88YYstYz9Dq8tE9lXLcmYJ3gP9xPr2WQAhtYv5qY5yDnsLGIDPqIM3Ycb-1_OpVtNOT1OuqnjuxoV3JGCXwHsuKSSsN6dlYeCRU46kXLRh0EdtYHRu56LCiEvpFeNRPmpad61230/s1600/noimage.png",hideCredits=!0,numComments=numComments||5,avatarSize=avatarSize||60,characters=characters||40,defaultAvatar=defaultAvatar||"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX6bMs88YYstYz9Dq8tE9lXLcmYJ3gP9xPr2WQAhtYv5qY5yDnsLGIDPqIM3Ycb-1_OpVtNOT1OuqnjuxoV3JGCXwHsuKSSsN6dlYeCRU46kXLRh0EdtYHRu56LCiEvpFeNRPmpad61230/s1600/noimage.png",moreLinktext=moreLinktext||" More »",showAvatar="undefined"==typeof showAvatar?!0:showAvatar,showMorelink="undefined"==typeof showMorelink?!1:showMorelink,roundAvatar="undefined"==typeof roundAvatar?!0:roundAvatar,hideCredits="undefined"==typeof hideCredits?!1:roundAvatar;
//]]>
</script>
<script type="text/javascript" src="https://vnbootstrap.blogspot.com/feeds/comments/default?alt=json&callback=idbcomments&max-results=7"></script>

Hướng Dẫn Nhúng Boostrap Vào Blogger

Trong bài viết trước tôi đã hướng dẫn các bạn tạo 1 trang web trắng tinh trên bloggspot. Tiếp nối bài này tôi sẽ hướng dẫn các bạn tích hợp bootstrap vào trong blogspot

Bài hướng dẫn tạo trang web trắng blogspot các bạn có thể tham khào tại link này

1. Tôi xin trích dẫn lại code bày trước

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html>
<head>
<title>
Tiêu đề trang web
</title>

<b:skin>
<![CDATA[ /* Chèn Css vào đây */ ]]>
</b:skin>
</head>

<body>
Thêm nội dung trang web của bạn vào đây
<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='yes'>
</b:section>
</body>

</html>

Đây là cấu trúc cơ bản của 1 template blogspot . Về giải thích các nội dung trong code bạn có thể comment bên dưới tôi sẽ giải thích.

2. Để thêm thêm link bootstrap vào ta sẽ thực hiện như sau:

2.1 Thêm Link css: Đăng nhập vào Blogger - Chủ đề - Chỉnh sửa HTML bạn thêm đoạn code bên dưới vào phía dưới thể <head>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>

2.2 Thêm Link Js : Làm tương tự bạn thêm 2 link bên dưới vào trước trên thẻ </body>

<script async='async' src='//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js' type='text/javascript'></script>
<script async='async' src='//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js' type='text/javascript'></script>

3.3 Thêm thẻ Reponsive cho blogger

<meta name="viewport" content="width=device-width, initial-scale=1">

Thật ra code này rất nhiều bạn đã biết rồi tôi không cần phải nhắc lại nữa. Bạn thêm nó vào bên dưới thẻ <head>

Kết luận
Trên đây, tôi đã hướng dẫn các bạn cách nhúng bộ thư viện Bootstrap vào website. Sau khi thực hiện việc nhúng xong Boostrap vào website, bạn có thể làm việc với các thành phần của Bootstrap.

Tích hợp hiệu ứng hộp đèn (Lightbox) cho hình ảnh trong Blogger

Bài viết này mình sẽ hướng dẫn các bạn tích hợp hiệu ứng hộp đèn cho blog. Hiệu ứng hộp đèn nó trông như ảnh này nhé

Bình thường, để thêm hiệu ứng hộp đèn cho blog, bạn chỉ cần làm như sau:
Đăng nhập Blogger ~> Vào Cài đặt ~> chọn Bài đăng và nhận xét ~> Tại cột Hiển thị hình ảnh với hiệu ứng Hộp đèn, chọn Có ~> Sau đó Lưu cài đặt

Tuy nhiên đối với những blog sau khi làm vậy vẫn không hiển thị hiệu ứng hộp đèn thì bạn làm thêm bước nữa:

Vào Mẫu ~> Chỉnh sửa HTML
Tìm đến thẻ <data:post.body/> (Đây là thẻ hiển thị nội dung bài viết)
Với những template mặc định thì <data:post.body/> thường được bao bởi thẻ div này

<div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='description articleBody'>
<data:post.body/>
</div>

Nguyên nhân blog của bạn không hiển thị được hiệu ứng hộp đèn là do template thiếu class='post-body'. Giờ bạn chỉ cần thêm class='post-body' bao quanh thẻ <data:post.body/> là xong

<div class='post-body'>
<data:post.body/>
</div>

Làm xong thì Lưu mẫu lại và xem kết quả nhé.

Chia sẻ bộ thẻ Meta full cho blogger năm 2018

Đây là bộ thẻ Meta Full năm 2018 dành cho blogger bộ thẻ này mình sưu tầm được nên post lên cho các bạn nào cần. Một số thẻ khá mới các bạn có thể tra trên google để tìm hiểu nhé.

<meta charset='utf-8'/>
<meta content='width=device-width,minimum-scale=1,initial-scale=1' name='viewport'/>
<meta content='blogger' name='generator'/>
<link href='http://www.blogger.com/openid-server.g' rel='openid.server'/>
<link expr:href='data:blog.homepageUrl' rel='openid.delegate'/>
<link expr:href='data:blog.url' rel='canonical'/>
<meta content='8E9FA6B68F4DC51D2E4130F5237F1DC3' name='msvalidate.01'/>
<meta content='uaJPi95ua-Gq8fhf8PYmJVfehY' name='alexaVerifyID'/>
<meta content='bqCvQd96fKEsDINdw8IsohwclFYFVWsaiGO7zZ1Zfcg' name='google-site-verification'/>
<meta content='de2d42a190998ae52a42b8fcd7f05c12' name='p:domain_verify'/>
<meta content='blogger' name='generator'/>
<meta content='index,follow' name='Googlebot'/>
<meta content='index,follow,noodp' name='robots'/>
<meta content='noodp' name='robots'/>
<link href='/favicon.ico' rel='icon' type='image/x-icon'/>
<meta content='https://www.facebook.com/huynhphung.websfy' property='article:publisher'/>
<meta content='https://www.facebook.com/huynhphungblogger' property='article:author'/>
<link href='https://plus.google.com/u/0/114911979260821967359/posts' rel='publisher'/>
<link href='https://plus.google.com/u/0/114911979260821967359/about' rel='author'/>
<link href='https://plus.google.com/u/0/114911979260821967359' rel='me'/>
<meta content='309376869532794' property='fb:app_id'/>
<meta content='100002919372380' property='fb:admins'/>
<meta content='Copyright @ Tôi Là Quản Trị 2014-2017 © All Rights Reserved.' name='copyright'/>
<b:if cond='data:blog.pageType == "static_page"'>
<title><data:blog.pageName/></title>
<meta content='index,follow' name='robots'/>
<meta content='noodp' name='robots'/>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
</b:if>

<link href='//1.bp.blogspot.com' rel='dns-prefetch'/>
<link href='//2.bp.blogspot.com' rel='dns-prefetch'/>
<link href='//3.bp.blogspot.com' rel='dns-prefetch'/>
<link href='//4.bp.blogspot.com' rel='dns-prefetch'/>
<link href='//www.blogger.com' rel='dns-prefetch'/>
<link href='//maxcdn.bootstrapcdn.com' rel='dns-prefetch'/>
<link href='//fonts.googleapis.com' rel='dns-prefetch'/>
<link href='//use.fontawesome.com' rel='dns-prefetch'/>
<link href='//ajax.googleapis.com' rel='dns-prefetch'/>
<link href='//resources.blogblog.com' rel='dns-prefetch'/>
<link href='//www.facebook.com' rel='dns-prefetch'/>
<link href='//plus.google.com' rel='dns-prefetch'/>
<link href='//twitter.com' rel='dns-prefetch'/>
<link href='//www.youtube.com' rel='dns-prefetch'/>
<link href='//feedburner.google.com' rel='dns-prefetch'/>
<link href='//www.pinterest.com' rel='dns-prefetch'/>
<link href='//www.linkedin.com' rel='dns-prefetch'/>
<link href='//feeds.feedburner.com' rel='dns-prefetch'/>
<link href='//github.com' rel='dns-prefetch'/>
<link href='//player.vimeo.com' rel='dns-prefetch'/>
<link href='//platform.twitter.com' rel='dns-prefetch'/>
<link href='//apis.google.com' rel='dns-prefetch'/>
<link href='//connect.facebook.net' rel='dns-prefetch'/>
<link href='//cdnjs.cloudflare.com' rel='dns-prefetch'/>
<link href='//www.google-analytics.com' rel='dns-prefetch'/>
<link href='//pagead2.googlesyndication.com' rel='dns-prefetch'/>
<link href='//googleads.g.doubleclick.net' rel='dns-prefetch'/>
<link href='//www.gstatic.com' rel='preconnect'/>
<link href='//www.googletagservices.com' rel='dns-prefetch'/>
<link href='//static.xx.fbcdn.net' rel='dns-prefetch'/>
<link href='//tpc.googlesyndication.com' rel='dns-prefetch'/>
<link href='//syndication.twitter.com' rel='dns-prefetch'/>


<b:if cond='data:blog.pageType == "error_page"'>
<title>Page Not Found - <data:blog.title/></title>
<script type='text/javascript'>
BSPNF_redirect = setTimeout(function()
{location.pathname= ""}, 7000); </script>
</b:if>

<b:if cond='data:blog.searchLabel'>
<title><data:blog.pageName/></title>
<meta expr:content='data:blog.metaDescription' name='Description'/>
<meta content='index,follow' name='robots'/></b:if>
<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.pageTitle/></title>
<meta expr:content='data:blog.metaDescription' name='description'/>
<meta content='noodp,noydir' name='robots'/>
<meta content='website' property='og:type'/>
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.metaDescription' name='og:description'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:else/>
<b:if cond='data:blog.pageType != "error_page"'>
<title><data:blog.pageName/></title>
</b:if></b:if>
<b:if cond='data:blog.pageType == "item"'>
<meta content='noodp' name='robots'/>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<meta expr:content='data:blog.metaDescription' name='description'/>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<meta expr:content='data:blog.postImageUrl' name='twitter:image'/>
<meta expr:content='data:blog.postImageUrl' itemprop='image'/></b:if>
<meta content='data:blog.pageName' property='og:site_name'/>
<meta content='article' property='og:type'/>
</b:if>
<b:if cond='data:blog.pageType != "error_page"'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<meta expr:content='data:blog.pageName + ", " + data:blog.pageTitle + ", " + data:blog.title' name='keywords'/></b:if></b:if>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.postImageThumbnailUrl'><link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/></b:if></b:if>
<link expr:href='data:blog.homepageUrl' rel='openid.delegate'/>
<link expr:href='data:blog.url' expr:title='data:blog.pageName' rel='openid.delegate'/>
<link expr:href='data:blog.homepageUrl + "feeds/posts/default"' expr:title='data:blog.title + " - Atom"' rel='alternate' type='application/atom+xml'/>
<link expr:href='data:blog.homepageUrl + "feeds/posts/default?alt=rss"' expr:title='data:blog.title + " - RSS"' rel='alternate' type='application/rss+xml'/>
<link expr:href='"http://www.blogger.com/feeds/" + data:blog.blogId + "/posts/default"' expr:title='data:blog.title + " - Atom"' rel='alternate' type='application/atom+xml'/>
<link href='http://www.blogger.com/openid-server.g' rel='openid.server'/>
<b:if cond='data:blog.pageType == "index"'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<link expr:href='data:blog.canonicalHomepageUrl' hreflang='vi' rel='alternate'/></b:if>
<b:else/>
<b:if cond='data:blog.pageTitle != data:blog.title'>
<link expr:href='data:blog.canonicalUrl' hreflang='vi' rel='alternate'/>
</b:if></b:if>



<meta content='Vietnamese' name='geo.country'/>
<meta content='VN-SG' name='geo.region'/>
<meta content='14.058324;108.277199' name='geo.position'/>
<meta content='14.058324, 108.277199' name='ICBM'/>
<meta content='Vietnam' name='geo.placename'/>
<meta content='en_US' property='og:locale'/>
<meta content='vi_VN' property='og:locale:alternate'/>
<meta content='all' name='audience'/>
<meta content='all' name='robots'/>
<meta content='vi' http-equiv='content-language'/>
<meta content='Vietnamese' name='language'/>
<meta content='vi-VN' name='language'/>
<meta content='Vietnamese' name='country'/>
<meta content='VN' name='language'/>
<meta content='Ho Chi Minh' name='city'/>
<meta content='Viet Nam' name='country'/>
<meta content='Ho Chi Minh' name='geo.placename'/>
<meta content='#4080ff' name='theme-color'/>
<meta content='#4080ff' name='msapplication-navbutton-color'/>
<meta content='yes' name='apple-mobile-web-app-capable'/>
<meta content='#4080ff' name='apple-mobile-web-app-status-bar-style'/>


<meta content='@pc8x' name='twitter:site'/>
<meta content='@pc8x' name='twitter:creator'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta expr:content='data:blog.homepageUrl' name='twitter:domain'/>
<meta expr:content='data:blog.pageName' name='twitter:title'/>
<b:if cond='data:blog.postImageUrl'>
<meta content='summary_large_image' name='twitter:card'/>
<meta expr:content='data:blog.postImageUrl' name='twitter:image'/>
<b:else/>
<meta content='summary' name='twitter:card'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' name='twitter:image'/>
</b:if>
</b:if>
<meta expr:content='data:blog.pageName' name='twitter:title'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
</b:if>

Nguồn: https://www.toilaquantri.com

Widget Recent post đẹp cho blogspot

1. Đăng nhập blogger - Bố cục - thêm tiện ích - HTML Javascript

Copy đoạn code bên dưới dán vào

<style scoped='' type='text/css'>
#recent-posts{color:#999;font-size:12px}
#recent-posts img{background:#fafafa;float:left;height:60px;margin-right:8px;width:60px;border-radius:4px}
#recent-posts ul{margin:0;padding:0}
#recent-posts ul li{margin:0 0 10px 0;padding:0 0 10px 0;border-bottom:1px solid rgba(0,0,0,0.1)}
#recent-posts ul li:last-child{border-bottom:0}
#recent-posts ul li a{display:block;color:#222;font-weight:700;text-decoration:none;font-size:14px;margin:0 0 10px 0;line-height:normal}
</style>
<div id='recent-posts'>
<script type='text/javaScript'>
var rcp_numposts=5;
var rcp_snippet_length=150;
var rcp_info='yes';
var rcp_comment='Comments';
var rcp_disable='T?t Nh?n xét';
function recent_posts(json){var dw='';a=location.href;y=a.indexOf('?m=0');dw+='<ul>';for(var i=0;i<rcp_numposts;i++){var entry=json.feed.entry[i];var rcp_posttitle=entry.title.$t;if('content'in entry){var rcp_get_snippet=entry.content.$t}else{if('summary'in entry){var rcp_get_snippet=entry.summary.$t}else{var rcp_get_snippet="";}};rcp_get_snippet=rcp_get_snippet.replace(/<[^>]*>/g,"");if(rcp_get_snippet.length<rcp_snippet_length){var rcp_snippet=rcp_get_snippet}else{rcp_get_snippet=rcp_get_snippet.substring(0,rcp_snippet_length);var space=rcp_get_snippet.lastIndexOf(" ");rcp_snippet=rcp_get_snippet.substring(0,space)+"";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rcp_commentsNum=entry.thr$total.$t+' '+rcp_comment}else{rcp_commentsNum=rcp_disable};if(entry.link[j].rel=='alternate'){var rcp_posturl=entry.link[j].href;if(y!=-1){rcp_posturl=rcp_posturl+'?m=0'}var rcp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rcp_thumb=entry.media$thumbnail.url}else{rcp_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5_i3doi_itnkzsYWjl8op0tZ_3uxBn9cFPhABQ65rXUIQ2ydt8jh71Io5YawDyMBBUDuM8A1ZhW0RLE2mFfCkWyviQO3T1Bi3XFcVm6yDOaMbOYg_-xPzHH0wyhcjAunGr0ji_gLFTJDh/"};}};dw+='<li>';dw+='<img alt="'+rcp_posttitle+'" src="'+rcp_thumb+'"/>';dw+='<div><a href="'+rcp_posturl+'" rel="nofollow" title="'+rcp_snippet+'">'+rcp_posttitle+'</a></div>';if(rcp_info=='yes'){dw+='<span>'+rcp_postdate.substring(8,10)+'/'+rcp_postdate.substring(5,7)+'/'+rcp_postdate.substring(0,4)+' - '+rcp_commentsNum+'</span>';};dw+='<div style="clear:both"></div></li>';};dw+='</ul>';document.getElementById('recent-posts').innerHTML=dw;};document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results='+rcp_numposts+'&callback=recent_posts\"><\/script>');
</script>
</div>

Save và hưởng thành quả!

Threaded Comments for Blogger With Awesome Style

Bài viết hướng dẫn các bạn tạo khung comments system đẹp cho blogspot. Vui lòng làm theo các bước sau đây

Bước 1: Vào chủ đề - Chỉnh sửa HTML tìm code sau:

<b:include data='post' name='comments'/>

Sau đó thay thế bằng code bên dưới

<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>

Bước 2: Tìm trong CSS và copy đoạn code bên dưới vào trước thẻ đóng ]]></b:skin>

.comments {
clear: both;
margin-top: 10px;
margin-bottom: 0px;
line-height: 1em;
}
.comments .comments-content {
font-size: 12px;
margin-bottom: 16px;
font-family: Verdana;
font-weight: normal;
text-align:left;
line-height: 1.4em;
}
.comments .continue a, .comments .comment .comment-actions a {
display:inline;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
padding: 2px 5px;
text-decoration: none;
text-shadow:0 1px 1px rgba(0,0,0,.3);
color:#FFF;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
margin-right: 10px;
border: 1px solid #3079ED;
background: #0066FF;
background: -webkit-gradient(linear, left top, left bottom, from(#0099FF), to(#009999));
background: -moz-linear-gradient(top, #0099FF, #009999);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0099FF', endColorstr='#009999');
}
.comments .continue a:hover, .comments .comment .comment-actions a:hover {
text-decoration: none;
background:#0099FF;
background: -webkit-gradient(linear, left top, left bottom, from(#009999), to(#0099FF));
background: -moz-linear-gradient(top, #009999, #0099FF);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#009999', endColorstr='#0099FF');
}
.comments .continue a:active, .comments .comment .comment-actions a:active {
position: relative;
top:1px;
background: -webkit-gradient(linear, left top, left bottom, from(#0066FF), to(#0099CC));
background: -moz-linear-gradient(top, #0066FF, #0099CC);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0066FF', endColorstr='#0099CC');
}
.comments .comments-content .comment-thread ol {
list-style-type: none;
padding: 0;
text-align: none;
}
.comments .comments-content .inline-thread {
padding: 0.5em 1em 0 1em;
}
.comments .comments-content .comment-thread {
margin: 8px 0px 0px 0px;
}
.comments .comments-content .comment-thread:empty {
display: none;
}
.comments .comments-content .comment-replies {
margin-top: 1em;
margin-left: 40px; font-size:12px;
}
.comments .comments-content .comment {
padding-bottom:8px;
margin-bottom: 0px
}
.comments .comments-content .comment:first-child {
padding-top:16px;
}
.comments .comments-content .comment:last-child {
border-bottom:0;
padding-bottom:0;
}
.comments .comments-content .comment-body {
position:relative;
}
.comments .comments-content .user {
font-style:normal;
font-weight:bold;
}
.comments .comments-content .user a {
color: #444;
}
.comments .comments-content .user a:hover {
text-decoration: none;
color: #555;
}
.comments .comments-content .icon.blog-author {
width: 18px;
height: 18px;
display: inline-block;
margin: 0 0 -4px 6px;
}
.comments .comments-content .datetime {
margin-left:6px;
color: #999;
font-style: italic;
font-size: 11px;
float: right;
}
.comments .comments-content .comment-content {
font-family: Arial, sans-serif;
font-size: 12.5px;
line-height: 19px;
}
.comments .comments-content .comment-content {
font-family: Arial, sans-serif;
font-size: 12.5px;
line-height: 19px;
text-align:none;
margin: 15px 0 15px;
}
.comments .comments-content .owner-actions {
position:absolute;
right:0;
top:0;
}
.comments .comments-replybox {
border: none;
height: 250px;
width: 100%;
}
.comments .comment-replybox-single {
margin-top: 5px;
margin-left: 48px;
}
.comments .comment-replybox-thread {
margin-top: 5px;
}
.comments .comments-content .loadmore a {
display: block;
padding: 10px 16px;
text-align: center;
}
.comments .thread-toggle {
cursor: pointer;
display: inline-block;
}
.comments .comments-content .loadmore {
cursor: pointer;
max-height: 3em;
margin-top: 3em;
}
.comments .comments-content .loadmore.loaded {
max-height: 0px;
opacity: 0;
overflow: hidden;
}
.comments .thread-chrome.thread-collapsed {
display: none;
}
.comments .thread-toggle {
display: inline-block;
}
.comments .thread-toggle .thread-arrow {
display: inline-block;
height: 6px;
width: 7px;
overflow: visible;
margin: 0.3em;
padding-right: 4px;
}
.comments .thread-expanded .thread-arrow {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent;
}
.comments .thread-collapsed .thread-arrow {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==") no-repeat scroll 0 0 transparent;
}
.comments .avatar-image-container {
float: left;
overflow: hidden;
}
.comments .avatar-image-container img {
width: 36px;
}
.comments .comment-block {
margin-left: 48px;
position: relative;
padding: 15px 20px 15px 20px;
background: #F7F7F7;
border: 1px solid #E4E4E4;
overflow: hidden;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-image: initial;
}

Save và hưởng thành quả!

[Sticky Widget] Cố định tiện ích khi cuộn trang blogspot

Sticky Widget cố định cho Blog là widget sẽ chạy theo màn hình khi cuộn trang xuống hoặc cuộn trang lên.

Với cách cố định Widget này sẽ giúp người truy cập nhanh vào các menu, hoặc bạn cần làm nổi bật một nội dung widget nào đó. Đặc biệt nó rất hay được dùng cho các trang cần cố định banner quảng cáo.

Để thực hiện Code cố định Widget (Sticky widget) khi cuộn trang cho Blogspot các bạn chỉ việc copy toàn bộ đoạn code phía dưới đây và chèn vào trước thẻ </body> trong template blogspot của các bạn.

<style>
.GICO_sticking {background:#f2f2f2 !important; position:fixed !important; top:0; z-index:9999; box-shadow:0px 10px 4px -5px rgba(0,0,0,0.3); margin-top: 0; position:relative9 !important;}
</style>
<script>
//<![CDATA[
StickyWidget("ID Widget"); // enter your widget ID here
function StickyWidget(elem) {
var GCVN_sticky = document.getElementById(elem);
var scrollee = document.createElement("div");
GCVN_sticky.parentNode.insertBefore(scrollee, GCVN_sticky);
var width = GCVN_sticky.offsetWidth;
var iniClass = GCVN_sticky.className + ' GCVN_sticky';
window.addEventListener('scroll', GICO_sticking, false);
function GICO_sticking() {
var rect = scrollee.getBoundingClientRect();
if (rect.top < 0) {
GCVN_sticky.className = iniClass + ' GICO_sticking';
GCVN_sticky.style.width = width + "px";
} else {
GCVN_sticky.className = iniClass;
}
}
}
//]]>
</script>

Chú ý: Bạn thay ID Widget thành ID Widget mà bạn muốn cố định.

Tạo Nút Lên Đầu Trang (Back To Top) Cho Blogspot

Hướng dẫn tạo nút Lên đầu trang (Back to top) với hiệu ứng animation cực đẹp cho Blogspot

Bước 1: Đăng nhập vào trang quản lý Blogger.com chọn Chủ đề rồi chọn tiếp Chỉnh sửa HTML . Sau đó các bạn copy mã bên dưới đây vào sau thẻ <head>

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

Bước 2: Bạn thêm tiếp code dưới đây vào trước thẻ </body>

<style type='text/css'>
/* Sonar Effect */
@-webkit-keyframes sonar-effect{0%{opacity:0.1}40%{opacity:0.3;box-shadow:0 0 0 5px #fff,0 0 10px 10px #fff,0 0 0 10px #fff}100%{box-shadow:0 0 0 5px #fff,0 0 10px 10px #fff,0 0 0 10px #fff;-webkit-transform:scale(1.5);transform:scale(1.5);opacity:0}}
@keyframes sonar-effect{0%{opacity:0.1}40%{opacity:0.3;box-shadow:0 0 0 5px #fff,0 0 10px 10px #fff,0 0 0 10px #fff}100%{box-shadow:0 0 0 5px #fff,0 0 10px 10px #fff,0 0 0 10px #fff;-webkit-transform:scale(1.5);transform:scale(1.5);opacity:0}}
/* To top */
.vikkatotop{visibility:hidden;z-index:2;background:rgba(52, 152, 219, 0.75);color:#fff;font-size:1.6rem;width:55px;height:55px;line-height:52px;text-align:center;position:fixed;bottom:40px;right:40px;cursor:pointer;-webkit-transform:translateZ(0) scale(0.0) rotate(360deg);transform:translateZ(0) scale(0.0) rotate(360deg);border-radius:100%;opacity:.9;transition:all .4s}
.vikkatotop:hover{background:#3498db;color:#fff;opacity:1}
.vikkatotop.arlniainf{visibility:visible;cursor:pointer;opacity:1;-webkit-transform:translateZ(0) scale(1.0) rotate(0deg);transform:translateZ(0) scale(1.0) rotate(0deg);transition:all .4s;}
.vikkatotop::before{content:'';display:inline-block;position:absolute;width:100%;height:100%;border-radius:100%;top:0;left:0}
.vikkatotop:hover::before{-webkit-animation:sonar-effect 1s ease-in-out .1s infinite;animation:sonar-effect 1s ease-in-out .1s infinite}
.vikkatotop{bottom:20px;right:20px;}
</style>
<div class='vikkatotop hider'>
<i class='fa fa-angle-up'></i>
</div>
<script type='text/javascript'>
//<![CDATA[
// Back to top button
$(function(){$(window).scroll(function(){$(this).scrollTop()>600?$(".vikkatotop").addClass('arlniainf'):$(".vikkatotop").removeClass('arlniainf')}),$(".vikkatotop").click(function(){return $("html,body").animate({scrollTop:0},600),!1})});
//]]>
</script>

Bước 3: Cuối cùng các bạn chọn Lưu chủ đề và load lại trang của mình để xem thành quả. Chúc các bạn thành công

Hướng dẫn tạo Menu cho Blogspot bằng Widget tùy chỉnh

Bài viết này sẽ hướng dẫn các bạn tạo cho mình Menu blogspot chuyên nghiệp. Như các bạn đã biết việc tạo Menu cho blogspot có rất nhiều cách thường là sử dụng chỉnh sửa trong code là chính. Đối với những bạn lập trình viên hoặc những bạn có kinh nghiệm về Blogger thì không có gì là khó nhưng đối với các bạn mới bước tìm hiểu về blogger cũng như thiết kế web thì không hề dễ dàng tý nào. Bây giờ chúng ta bắt đầu việc tạo Menu này nhé, thực hiện theo các bước bên dưới đây.

Bước 1: Vào chủ đề - Chỉnh sửa HTML . Copy đoạn code bên dưới vào trước thẻ </body>

<script>
//<![CDATA[
$(document).ready(function(){
//this widget was built by Raintemplates.com
var searchtxt = "Search";
var _0xc283=['$.1y($.1m[":"],{o:k(a,c,b){U 0===$(a).n().1j().1o(b[3])}});k V(){$(".t j:H(:o(l))").B(k(){$(e).1x("j:o(l)").18&&$(e).i("a").2q("1h").1a(\'<h K="L://M.N.O/P/h" S="0 0 C.4 C.4" 1z="W" 1O="W"><1Q 29="2k.3 X.6 11.7 1p.5 21.2 X.6 0 F.8 11.7 1H.9 C.4 F.8 " G="#1M"/></h>\');$("<D/>",{I:$(e).1T(".t j:H(:o(l))"),1W:e})})}$(".t").B(k(){1X a=$(e).i("1Y");26(a.J(\':2a("2c")\'))V(),$(e).m("2m","2p"),$(e).m("f","2s"),$(e).m("1f-1g","u-1i"),$(e).i(".v-1k-1l").Z(),$(e).i(".v-1n").m("f","r-w"),$(e).i(".1q").Z(),a.I(\'\\1r!--1s v J 1t u.Q--\\1u<a R="//u.Q">1v 1w</a>\'),$(".x").18?$(e).T(\'<g f="x"></g>\'):$(1A).T(\'<g f="1B-1C x"></g>\'),$(".r-w D j D j a").B(k(){$(e).n($(e).n().1D(/[l]/,""))}),$(".r-w").1a(\'<g f="1E"><a R="1F:1G(0)" f="y-1I"><h G="#1J" S="0 0 z.A 1K.1L" K="L://M.N.O/P/h"><Y f="1N-1" d="1P,z.10.4,3.4,0,0,1,0-4.1R.1S,p.1U-.3-.1V.p,24.p,0,1,1,12.14,1Z.20.2,24.2,0,0,1-13.22-4.23-.p-.25.16,z.10.4,3.4,0,0,1-4.16,27.A,24.28.6,17.6,0,1,0,12.14,6.8,17.19,17.19,0,0,0,15.A,24.2b"></Y></h></a><E 2d-2e="2f-8" 2g="/y" f="2h-E" 2i="2j"><s f="2l-y-s 1b" 2n="q" 1b="\'+2o+\'" 1c="n" 1d=""><s 1d="2r" f="1e" 1c="1e"/></E></g>\');2t U!1;$(e).2u({2v:"1"})});',
"|","split","||||||||||||||this|class|div|svg|find|li|function|_|attr|text|startsWith|39|||input|LinkList|raintemplates|widget|nav|container|search|57|93|each|407|ul|form|112|fill|not|html|is|xmlns|http|www|w3|org|2000|com|href|viewBox|wrapInner|return|raintemplatesmenu|512|91|path|remove|68a3|203|33||53||81||length|62|append|placeholder|type|value|submit|data|version|hasdrop|linklist|trim|item|control|expr|content|indexOf|273|clear|x3c|This|by|x3e|Blogger|Templates|next|extend|width|idlist|rain|contain|replace|searchbox|javascript|void|315|box|dddddd|58|68|888|cls|height|M1|polygon|81L14|37|nextUntil|5l|39A24|appendTo|var|h2|48|8a24||86|33l||27L5|if|0ZM15|4A17|points|contains|4Z|Raintemplates|accept|charset|utf|action|navbar|method|get|386|sb|id|name|searchtxt|listmenu1|addClass|Search|menulist|else|css|opacity",
"","fromCharCode","replace","\\w+","\\b","g"];eval(function(d,e,a,c,b,f){b=function(a){return(a<e?_0xc283[4]:b(parseInt(a/e)))+(35<(a%=e)?String[_0xc283[5]](a+29):a.toString(36))};if(!_0xc283[4][_0xc283[6]](/^/,String)){for(;a--;)f[b(a)]=c[a]||b(a);c=[function(a){return f[a]}];b=function(){return _0xc283[7]};a=1}for(;a--;)c[a]&&(d=d[_0xc283[6]](new RegExp(_0xc283[8]+b(a)+_0xc283[8],_0xc283[9]),c[a]));return d}(_0xc283[0],62,156,_0xc283[3][_0xc283[2]](_0xc283[1]),0,{}));
});
//]]>
</script>

Bước 2: Thêm CSS cho nó đẹp hơn ( Mặc định màu nên Menu là màu đen )

<style>
.rain-contain.container{
max-width:1040px;
margin:0 auto;
}
.LinkList{opacity:0;}
.menulist {
width:100%;
height:48px;
background:#333;
color:#fff;
position:relative;
}
.menulist h2 {display:none}
.menulist .r-nav ul li a:link, .menulist .r-nav ul li a:visited {
color:#fff;
text-decoration:none;
font-size:15px;
}
.menulist .r-nav ul li {
display:inline-block;
position:relative;
margin:0px 20px;
height:48px;
line-height:48px;
}
.menulist .r-nav ul li ul {
position:absolute;
left:-10px;
min-width: 250px;
background:#222;
opacity:0;
z-index:-1;
}
.menulist .r-nav ul li ul li {
display:block;
border-bottom: 1px solid #555;
}
.menulist .r-nav a:hover {
opacity:0.8;
-webkit-transition: all 0.2s ease-in-out 0s;
-moz-transition: all 0.2s ease-in-out 0s;
-o-transition: all 0.2s ease-in-out 0s;
-ms-transition: all 0.2s ease-in-out 0s;
transition: all 0.2s ease-in-out 0s;
}
.menulist .r-nav ul li ul li:last-child {
border:none;
}
.menulist .r-nav ul li:hover ul {
opacity:1;
z-index:10;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
-webkit-animation-name: raintemplates-hang;
animation-name: raintemplates-hang;
-webkit-animation-duration: 0.3s;
animation-duration: 0.3s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
.hasdrop svg {
width:13px;
height:13px;
position:relative;
top:3px;
left:8px;
}
.menulist .r-nav ul li:hover svg{
-webkit-transition: all 0.2s ease-in-out 0s;
-moz-transition: all 0.2s ease-in-out 0s;
-o-transition: all 0.2s ease-in-out 0s;
-ms-transition: all 0.2s ease-in-out 0s;
transition: all 0.2s ease-in-out 0s;
}
.search-box svg {
display:none;
}
.r-nav {
position: relative;
width: 100%;
height: 100%;
}
.searchbox form, .searchbox input{
position: absolute;
right: 0;
top: 0;
bottom: 0;
margin-top: auto;
margin-bottom: auto;
}
.searchbox input.sb-search-input.placeholder {
height: 29px;
border: none;
padding-left: 12px;
font-size: 13px;
}
.searchbox .submit {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqrf4r-6BAjBt561MTxBpoVQn8XZXnUgFAJVAzIQ3zkK_b1fxdS_Pz3jEsxvuSAFvXdU2a2-fRBqoWCTN4e0FrbAwx0lgoTQuDr3tiwk8dE9AmpLDFGLKakQjxsI1hoyiLoK8sFYK2YkiZ/s50/search.png) no-repeat;
border: none;
height: 16px;
width: 16px;
background-size: 100%;
margin-right: 10px;
font-size: 0px;
}
@-webkit-keyframes raintemplates-hang {
0% {
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}
50% {
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
100% {
-webkit-transform: translateY(-2px);
transform: translateY(-2px);
}
}
@keyframes raintemplates-hang {
0% {
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}
50% {
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
100% {
-webkit-transform: translateY(-2px);
transform: translateY(-2px);
}
}</style>

Tiếp theo vào trong Bố cục thêm tiện ích - Link List ( Danh sách liên kết)

Phần tiêu đề bạn ghi đầy đủ tên như trong hình nhé.

Cách thêm Menu bạn làm như sau:

New Site Name : Tên menu chính ví dụ tôi đặt là " Trang chủ" sau đó add link

Tương tự bạn tạo thêm các nội dung khác: Ví dụ là là " Giới thiệu". 2 tên này sẽ nằm ngang theo thứ tự khi bạn tạo xong.

Tạo menu con (Sub menu) : ví dụ tôi muốn tạo 1 menu con có tên "Thư ngõ " nằm trong menu "Giới thiệu" . Cách tạo vẫn như cách 1 nhưng ta thêm dấu _ đằng trước nó ví dụ (_Giới thiệu ). Tương tự cho các menu con bên trong.

Bước 3: Thêm thư viện cho Menu

Copy đoạn code bên dưới vào sau thẻ <head>

<script src=”//code.jquery.com/jquery-1.8.3.min.js”></script>

Lưu ý: Nếu trong template của bạn đã có thư viện này thì vui lòng bỏ qua bước này.

Chúc các bạn thành công. Bạn có thể comments bên dưới để được hỗ trợ

Xem demo tại đây: http://navigationdropdown.blogspot.com

Thanks ! https://raintemplates.com

Cách thêm Widget (thêm tiện ích) vào Blogspot

1. Cách thêm một tiện ích widget thông thường

Ở cách thêm tiện ích widget thông thường này thì khi thêm tiện ích sẽ xuất hiện toàn bộ web, từ trang chủ, bài viết, label ...

<b:section class='sidebar' id='sidebar1' preferred='yes'>
<b:widget id='HTML99' locked='false' title='Xem nhiều trên PC8X' type='HTML'>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<div class='title-left'><data:title/></div>
</b:if>
<div class='box-left'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
</b:section>

Xem nhiều trên PC8X là tiêu đề bạn đặt cho tiện ích

sidebar1, HTML99 là thứ tự của các layer widget. nếu save nó báo đỏ thì đổi số cho khác vì nó rùng lặp. khi tạo cái khác cũng thế

VD: tiện ích 1 là sidebar1, HTML99 thì tiện ích 2 là sidebar2, HTML100
HTML là tên của tiện ích

VD HTML là HTML/Javascript, nếu bạn muốn thêm nhãn thì thay Bằng Label. phần này hơi phức tạp nếu bạn mà làm không được thì cứ commen vào bên giới mình sẽ chỉ rỏ cho

Ở những cách sau đây là những cách chỉ thêm tiện ích vào một vị trí bất kỳ ví dụ như trang chủ hoặc là label, bài viết, trang...

1. Chỉ cho phép widget hiển thị ở trang chủ

<b:section class='sidebar' id='sidebar1' preferred='yes'>
<b:widget id='HTML3' locked='false' title='Thêm tiện ích ở trang chủ' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>
</b:section>

Để thêm bạn đầu tiên là phải xác định vị trí muốn thêm, như head, footer....(nếu không xác địch được thì sau khi thêm vào một vị trí cùng với các tiện ích có sẵn trên web (thêm vào đầu hoặc cuối các tiện ích có sẵn sau này cho dể chĩnh sữa) rồi bạn vào bố cụng để di chuyển đến nơi thích hợp)
sau khi xác định vị trí muốn thêm thì bạn hãy copy cã đoạn mã trên rồi dán vào

2. Chỉ cho phép widget hiển thị ở từng bài viết

<b:section class='sidebar' id='sidebar1' preferred='yes'>
<b:widget id='HTML3' locked='false' title='Thêm tiện ích ở từng bài viết' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>
</b:section>

Đây là thủ thuật nhằm thêm tiện ích trên toàn bộ các bài viết:

3. Chỉ cho phép widget hiển thị ở những trang nhất định

<b:section class='sidebar' id='sidebar1' preferred='yes'>
<b:widget id='HTML3' locked='false' title='Thêm tiện ích ở trang nhất định' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == "Link của bạn"'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>
</b:section>

4. Widget chỉ hiển thị trên các trang Label

<b:section class='sidebar' id='sidebar1' preferred='yes'>
<b:widget id='HTML3' locked='false' title='Thêm tiện ích ở trên các label' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.searchLabel'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>
</b:section>

5. Widget chỉ hiển thị trên các trang Static pages

<b:section class='sidebar' id='sidebar1' preferred='yes'>
<b:widget id='HTML3' locked='false' title='Thêm tiện ích ở static pages' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "static_page"'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>
</b:section>

6. Widget hiển thị trên trang tìm kiếm

<b:section class='sidebar' id='sidebar1' preferred='yes'>
<b:widget id='HTML3' locked='false' title='Thêm tiện ích ở trang tìm kiếm' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.searchQuery>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>
</b:section>

7. Widget chỉ hiển thị tại trang lưu trữ

<b:section class='sidebar' id='sidebar1' preferred='yes'>
<b:widget id='HTML3' locked='false' title='Thêm tiện ích ở trang lưu trữ' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "archive"'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>
</b:section>

Tạo phân trang (Page Navigation) cho Blogspot

Nếu như blog của bạn có nhiều bài viết thì sẽ rất mất công cho người dùng khi muốn xem các bài viết cũ hơn trên blog của bạn. Tính năng bài đăng cũ hơn hay mới mơi không thể giải quyết hết vấn đề mà người đọc cần. Bài viết này mình sẽ hướng dẫn các bạn cách tạo phân trang cho blog của bạn rất đơn giản chỉ vài bước sau đây.

Bước 1: Thêm Script

Copy đoạn code sau đây và dán vào trước thẻ </body> trong Template

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<script type='text/javascript'>
//<![CDATA[
var perPage=10;
var numPages=2;
var firstText ='First';
var lastText ='Last';
var prevText ='« Previous';
var nextText ='Next »';
var urlactivepage=location.href;
var home_page="/";
if(typeof firstText=="undefined")firstText="First";if(typeof lastText=="undefined")lastText="Last";var noPage;var currentPage;var currentPageNo;var postLabel;pagecurrentg();function looppagecurrentg(pageInfo){var html='';pageNumber=parseInt(numPages/2);if(pageNumber==numPages-pageNumber){numPages=pageNumber*2+1}pageStart=currentPageNo-pageNumber;if(pageStart<1)pageStart=1;lastPageNo=parseInt(pageInfo/perPage)+1;if(lastPageNo-1==pageInfo/perPage)lastPageNo=lastPageNo-1;pageEnd=pageStart+numPages-1;if(pageEnd>lastPageNo)pageEnd=lastPageNo;html+="<span class='showpageOf'>Page "+currentPageNo+'/'+lastPageNo+"</span>";var prevNumber=parseInt(currentPageNo)-1;if(currentPageNo>1){if(currentPage=="page"){html+='<span class="showpage firstpage"><a href="'+home_page+'">'+firstText+'</a></span>'}else{html+='<span class="displaypageNum firstpage"><a href="/search/label/'+postLabel+'?&max-results='+perPage+'">'+firstText+'</a></span>'}}if(currentPageNo>2){if(currentPageNo==3){if(currentPage=="page"){html+='<span class="showpage"><a href="'+home_page+'">'+prevText+'</a></span>'}else{html+='<span class="displaypageNum"><a href="/search/label/'+postLabel+'?&max-results='+perPage+'">'+prevText+'</a></span>'}}else{if(currentPage=="page"){html+='<span class="displaypageNum"><a href="#" onclick="redirectpage('+prevNumber+');return false">'+prevText+'</a></span>'}else{html+='<span class="displaypageNum"><a href="#" onclick="redirectlabel('+prevNumber+');return false">'+prevText+'</a></span>'}}}if(pageStart>1){if(currentPage=="page"){html+='<span class="displaypageNum"><a href="'+home_page+'">1</a></span>'}else{html+='<span class="displaypageNum"><a href="/search/label/'+postLabel+'?&max-results='+perPage+'">1</a></span>'}}if(pageStart>2){html+=' ... '}for(var jj=pageStart;jj<=pageEnd;jj++){if(currentPageNo==jj){html+='<span class="pagecurrent">'+jj+'</span>'}else if(jj==1){if(currentPage=="page"){html+='<span class="displaypageNum"><a href="'+home_page+'">1</a></span>'}else{html+='<span class="displaypageNum"><a href="/search/label/'+postLabel+'?&max-results='+perPage+'">1</a></span>'}}else{if(currentPage=="page"){html+='<span class="displaypageNum"><a href="#" onclick="redirectpage('+jj+');return false">'+jj+'</a></span>'}else{html+='<span class="displaypageNum"><a href="#" onclick="redirectlabel('+jj+');return false">'+jj+'</a></span>'}}}if(pageEnd<lastPageNo-1){html+='...'}if(pageEnd<lastPageNo){if(currentPage=="page"){html+='<span class="displaypageNum"><a href="#" onclick="redirectpage('+lastPageNo+');return false">'+lastPageNo+'</a></span>'}else{html+='<span class="displaypageNum"><a href="#" onclick="redirectlabel('+lastPageNo+');return false">'+lastPageNo+'</a></span>'}}var nextnumber=parseInt(currentPageNo)+1;if(currentPageNo<(lastPageNo-1)){if(currentPage=="page"){html+='<span class="displaypageNum"><a href="#" onclick="redirectpage('+nextnumber+');return false">'+nextText+'</a></span>'}else{html+='<span class="displaypageNum"><a href="#" onclick="redirectlabel('+nextnumber+');return false">'+nextText+'</a></span>'}}if(currentPageNo<lastPageNo){if(currentPage=="page"){html+='<span class="displaypageNum lastpage"><a href="#" onclick="redirectpage('+lastPageNo+');return false">'+lastText+'</a></span>'}else{html+='<span class="displaypageNum lastpage"><a href="#" onclick="redirectlabel('+lastPageNo+');return false">'+lastText+'</a></span>'}}var pageArea=document.getElementsByName("pageArea");var blogPager=document.getElementById("blog-pager");for(var p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}if(pageArea&&pageArea.length>0){html=''}if(blogPager){blogPager.innerHTML=html}}function totalcountdata(root){var feed=root.feed;var totaldata=parseInt(feed.openSearch$totalResults.$t,10);looppagecurrentg(totaldata)}function pagecurrentg(){var thisUrl=urlactivepage;if(thisUrl.indexOf("/search/label/")!=-1){if(thisUrl.indexOf("?updated-max")!=-1){postLabel=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"))}else{postLabel=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"))}}if(thisUrl.indexOf("?q=")==-1&&thisUrl.indexOf(".html")==-1){if(thisUrl.indexOf("/search/label/")==-1){currentPage="page";if(urlactivepage.indexOf("#PageNo=")!=-1){currentPageNo=urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length)}else{currentPageNo=1}document.write("<script src=\""+home_page+"feeds/posts/summary?max-results=1&alt=json-in-script&callback=totalcountdata\"><\/script>")}else{currentPage="label";if(thisUrl.indexOf("&max-results=")==-1){perPage=20}if(urlactivepage.indexOf("#PageNo=")!=-1){currentPageNo=urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length)}else{currentPageNo=1}document.write('<script src="'+home_page+'feeds/posts/summary/-/'+postLabel+'?alt=json-in-script&callback=totalcountdata&max-results=1" ><\/script>')}}}function redirectpage(numberpage){jsonstart=(numberpage-1)*perPage;noPage=numberpage;var nameBody=document.getElementsByTagName('head')[0];var newInclude=document.createElement('script');newInclude.type='text/javascript';newInclude.setAttribute("src",home_page+"feeds/posts/summary?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost");nameBody.appendChild(newInclude)}function redirectlabel(numberpage){jsonstart=(numberpage-1)*perPage;noPage=numberpage;var nameBody=document.getElementsByTagName('head')[0];var newInclude=document.createElement('script');newInclude.type='text/javascript';newInclude.setAttribute("src",home_page+"feeds/posts/summary/-/"+postLabel+"?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost");nameBody.appendChild(newInclude)}function finddatepost(root){post=root.feed.entry[0];var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);var timestamp=encodeURIComponent(timestamp1);if(currentPage=="page"){var pAddress="/search?updated-max="+timestamp+"&max-results="+perPage+"#PageNo="+noPage}else{var pAddress="/search/label/"+postLabel+"?updated-max="+timestamp+"&max-results="+perPage+"#PageNo="+noPage}location.href=pAddress}
//]]>
</script>
</b:if>
</b:if>

Bước 2: Chỉnh sửa lại URl Label

Ở bước này chúng ta sẽ sửa lỗi không hiển thị phân trang khi xem các bài viết trong 1 Label. Các bạn hãy tìm và sửa tất cả

expr:href='data:label.url'

và bạn sửa nó thành

expr:href='data:label.url + "?&max-results=10"'

Bước 3: Viết CSS

Chúng ta đều cần phải ngồi viết lại CSS cho nó để nó được đẹp hơn và hòa hợp với Template hiện tại. Vì vậy, mỗi người sẽ có một cách viết CSS riêng. Tuy nhiên, mình cũng xin được chia sẻ đoạn CSS mà mình đã viết sẵn cho những bạn không biết viết CSS hay là không có thời gian,…

Các bạn chỉ việc copy đoạn CSS dưới đây và dán vào trước thẻ ]]></b:skin> của mình là được.

#blog-pager {clear:both;margin:30px auto;text-align:center; padding: 7px;}
.blog-pager {background: none;}
.displaypageNum a, .showpage a, .pagecurrent {font-size: 14px;padding: 5px 12px;margin-right:5px; color: #666; background-color:#eee;}
.displaypageNum a:hover, .showpage a:hover, .pagecurrent {background:#359BED;text-decoration:none;color: #fff;}
#blog-pager .pagecurrent {font-weight:bold;color: #fff;background:#359BED;}
.showpageOf {display:none!important}
#blog-pager .pages {border:none;}

Đây là một thủ thuật bạn nên thực hiện nếu như blog của mình có nhiều bài viết nhé! Chúc các bạn thành công!

Bài viết tham khảo nguồn tại : https://mocgin.com

Hướng dẫn tạo Recent Post hiển thị theo Label

Bước 1: Vào blogger.com > Template > Edit HTML
Bước 2: Dán code bên dưới vào trên thẻ </head>

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<style type='text/css'>
.newarlinalabel1 ul,.newarlinalabel2 ul{list-style:none;margin:0;padding:0} .newarlinalabel1 li,.newarlinalabel2 li{margin:0;padding:0;} .newarlinalabel1 .widget,.newarlinalabel2 .widget{margin:0;padding:0} .newarlinalabel1 .widget-content,.newarlinalabel2 .widget-content{border:1px solid #e9e9e9;padding:20px;margin:0;word-wrap:break-word;overflow:hidden} .newarlinalabel1 h2,.newarlinalabel2 h2,.newarlinalabel3 h2{position:relative;margin:0;padding:15px 20px;font-size:16px;font-weight:700;text-transform:uppercase;color:#333;border:1px solid #e9e9e9;border-bottom:0} .newarlinalabel2 h2,.newarlinalabel3 h2{margin:20px 0 0 0;} .newarlinalabel1 h2:before,.newarlinalabel2 h2:before,.newarlinalabel3 h2:before{content:'\f108';right:10px;bottom:0;font-family:FontAwesome;font-style:normal;font-weight:normal;margin:0 10px 0 0;color:#ff675c;} .newarlinalabel2 h2:before{content:'\f0c3';}.newarlinalabel3 h2:before{content:'\f143';} .newarlinalabel1 .index,.newarlinalabel2 .index{font-size:10px;float:right;font-weight:400;} .newarlinalabel1 .index a,.newarlinalabel2 .index a{display:flex;color:#039be5;padding:3px 8px;border-radius:2px;font-weight:400;border:1px solid #29b6f6} .newarlinalabel2 .index a{color:#ef6c00;border-color:#ffa726} .newarlinalabel1 .index a:hover{background:#039be5;color:#fff;border-color:transparent} .newarlinalabel2 .index a:hover{background:#ef6c00;color:#fff;border-color:transparent} .newarlinalabel1 .index a:after{content:"\f105";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-left:5px} .newarlinalabel2 .index a:after{content:"\f105";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-left:6px} .newarlinalabel2 span.newarlina_meta_comment a:hover{color:#38761d!important} .newarlinalabel2 ul.newarlina_thumbs li a:hover,.newarlinalabel2 ul.newarlina_thumbs2 li a:hover{color:#ff675c;text-decoration:none} .newarlina_left{width:280px;width:45.7%;float:left;margin:0;padding:0 20px 0 0;border-right:1px solid #e9e9e9} .newarlina_right{width:250px;width:47.5%;float:right;margin:0;padding:0} ul.newarlina_thumbs{margin:0;padding:0} ul.newarlina_thumbs li,ul.newarlina_thumbs2{margin:0;padding:0} ul.newarlina_thumbs .cat_thumb{position:relative;margin:0 0 15px;padding:0;width:280px;height:200px} ul.newarlina_thumbs .cat_thumb img{height:auto;width:100%;transition:all 0.2s} ul.newarlina_thumbs .cat_thumb img:hover{opacity:.9;} ul.newarlina_thumbs2 li{margin:0 0 10px;padding:0 0 10px;border-bottom:1px solid #e9e9e9} ul.newarlina_thumbs2 li:last-child{border-bottom:none;margin:0;padding:0} ul.newarlina_thumbs2 .cat_thumb2{float:left;margin:0 10px 0 0;width:62px;height:72px;overflow:hidden} ul.newarlina_thumbs2 .cat_thumb2 img{height:auto;transition:all .2s} ul.newarlina_thumbs2 .cat_thumb2 img:hover{opacity:.9;} span.newarlina_title{font-family:'Roboto Condensed',sans-serif;font-size:20px;font-weight:700;display:block;margin:0 0 10px;line-height:normal;text-transform:none} span.newarlina_title2{font-size:16px;line-height:1.4em;margin:0 0 3px} span.newarlina_title a{color:#333} span.newarlina_title a:hover{color:#ff675c;text-decoration:none} span.newarlina_summary{display:block;line-height:1.6em;font-size:13px;text-overflow:ellipsis;margin:10px 0 0 0} span.newarlina_meta{display:block;font-family:'Roboto Condensed',sans-serif;font-size:11px;font-weight:400;color:#aaa;text-transform:uppercase} span.newarlina_meta a{color:#aaa;display:inline-block} span.newarlina_meta_date,span.newarlina_meta_comment,span.newarlina_meta_more{display:inline-block;margin-right:10px} span.newarlina_meta_comment a:before{content:"\f0e6";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-right:5px} span.newarlina_meta_comment a:hover{color:#ff675c!important} span.newarlina_meta_date:before{content:"\f133";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-right:5px} ul.newarlina_thumbs2 li a:hover,ul.newarlina_thumbs li a:hover{color:#ff675c;text-decoration:none} @media screen and (max-width:1024px) { .newarlinalabel1 .widget-content, .newarlinalabel2 .widget-content {padding:20px 25px;} .newarlina_left {width:50%;float:left;margin:0;padding:0;border-right:none} .newarlina_right {width:46%;float:right;margin:0;padding:0;} ul.newarlina_thumbs .cat_thumb {width:100%;height:auto;} ul.newarlina_thumbs .cat_thumb img {width:100%;height:auto;} ul.newarlina_thumbs li {margin:0;padding:0;} span.newarlina_title2 {font-size:20px;line-height:1.2em;} span.newarlina_summary {font-size:14px;}} @media only screen and (max-width:768px){ .newarlinalabel1 .widget-content,.newarlinalabel2 .widget-content{padding:10px 20px} .newarlina_right{width:100%;float:left;margin:0;padding:0} ul.newarlina_thumbs2 li{border-bottom:0} span.newarlina_summary,.newarlina_left{display:none} span.newarlina_title{margin:0 0 5px} ul.newarlina_thumbs li{margin:0 0 10px;padding:0 0 10px;border-bottom:0} span.newarlina_title2{font-size:18px;line-height:1.2em}} @media only screen and (max-width:480px){ #newarlinalabel1-wrapper,#newarlinalabel2-wrapper{display:none}} @media only screen and (max-width:320px){ .newarlinalabel1 .widget-content,.newarlinalabel2 .widget-content{padding:10px 20px} .newarlinalabel1 h2,.newarlinalabel2 h2{padding:10px 20px 1px 20px} .newarlina_right{width:100%;float:left;margin:0;padding:0} ul.newarlina_thumbs li{margin:0 0 10px;padding:0 0 10px;} span.newarlina_title2{font-size:18px;line-height:1.2em}} @media screen and (max-width:260px) { .newarlinalabel1 .widget-content,.newarlinalabel2 .widget-content{padding:10px} .newarlinalabel1 h2,.newarlinalabel2 h2{padding:10px 10px 1px 10px} .newarlina_right{width:100%;float:left;margin:0;padding:0} ul.newarlina_thumbs li{margin:0 0 10px;padding:0 0 10px;} span.newarlina_title2{font-size:18px;line-height:1.2em}}
</style>
</b:if>
</b:if>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<script type='text/javascript'>
//<![CDATA[ function labelthumbs(t){for(var e=0;e<numposts;e++){var n,r=t.feed.entry[e],m=r.title.$t;if(e==t.feed.entry.length)break;for(var i=0;i<r.link.length;i++){if("replies"==r.link[i].rel&&"text/html"==r.link[i].type)var l=r.link[i].title,o=r.link[i].href;if("alternate"==r.link[i].rel){n=r.link[i].href;break}}var u;try{u=r.media$thumbnail.url,u=u.replace("/s72-c/","/w"+thumb_width+"-h"+thumb_height+"-c/")}catch(h){s=r.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),u=-1!=a&&-1!=b&&-1!=c&&""!=d?d:no_thumb}var p=r.published.$t,w=p.substring(0,4),_=p.substring(5,7),f=p.substring(8,10),g=new Array;g[1]="January",g[2]="February",g[3]="March",g[4]="April",g[5]="May",g[6]="June",g[7]="July",g[8]="August",g[9]="September",g[10]="October",g[11]="November",g[12]="December",document.write('<span class="newarlina_left">'),document.write('<ul class="newarlina_thumbs">'),document.write("<li>"),1==showpostthumbnails&&document.write('<a href="'+n+'"><div class="cat_thumb"><span class="rollover"></span><img width="'+thumb_width+'" height="'+thumb_height+'" alt="'+m+'" src="'+u+'"/></div></a>'),document.write('<span class="newarlina_title"><a href="'+n+'" target ="_top">'+m+"</a></span>");var v="";if(document.write('<span class="newarlina_meta">'),1==showpostdate&&(v=v+'<span class="newarlina_meta_date">'+g[parseInt(_)]+" "+f+", "+w+"</span>"),1==showcommentnum&&("1 Comments"==l&&(l="1 Comments"),"0 Comments"==l&&(l="0 Comments"),showcomment='<span class="newarlina_meta_comment"><a href="'+o+'">'+l+"</a></span>",v+=showcomment),1==displaymore&&(v=v+'<span class="newarlina_meta_more"><a href="'+n+'" class="url" target ="_top">Read More...</a></span>'),document.write(v),document.write("</span>"),document.write('<span class="newarlina_summary">'),"content"in r)var y=r.content.$t;else if("summary"in r)var y=r.summary.$t;else var y="";var k=/<\S[^>]*>/g;if(y=y.replace(k,""),1==showpostsummary)if(y.length<numchars)document.write(""),document.write(y),document.write("");else{document.write(""),y=y.substring(0,numchars);var $=y.lastIndexOf(" ");y=y.substring(0,$),document.write(y+"..."),document.write("")}document.write("</span>"),document.write("</li>"),document.write("</ul>"),document.write("</span>")}document.write('<span class="newarlina_right">'),document.write('<ul class="newarlina_thumbs2">');for(var e=1;e<numposts2;e++){var n,r=t.feed.entry[e],m=r.title.$t;if(e==t.feed.entry.length)break;for(var i=1;i<r.link.length;i++){if("replies"==r.link[i].rel&&"text/html"==r.link[i].type)var l=r.link[i].title,o=r.link[i].href;if("alternate"==r.link[i].rel){n=r.link[i].href;break}}var x;try{x=r.media$thumbnail.url.replace("/s72-c/","/w"+thumb_width2+"-h"+thumb_height2+"-c/")}catch(h){s=r.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),x=-1!=a&&-1!=b&&-1!=c&&""!=d?d:no_thumb2}var p=r.published.$t,w=p.substring(0,4),_=p.substring(5,7),f=p.substring(8,10);1==showpostthumbnails2&&document.write('<a href="'+n+'"><div class="cat_thumb2"><img width="'+thumb_width2+'" height="'+thumb_height2+'" alt="'+m+'" src="'+x+'"/></div></a>'),document.write("<li>"),document.write('<span class="newarlina_title newarlina_title2"><a href="'+n+'" target ="_top">'+m+"</a></span>");var v="";document.write('<span class="newarlina_meta newarlina_meta2">'),1==showpostdate2&&(v=v+'<span class="newarlina_meta_date">'+g[parseInt(_)]+" "+f+", "+w+"</span>"),1==showcommentnum2&&("1 Comment"==l&&(l="1 Comments"),"0 Comment"==l&&(l="0 Comments"),showcomment='<span class="newarlina_meta_comment newarlina_meta_comment2"><a href="'+o+'">'+l+"</a></span>",v+=showcomment),1==displaymore2&&(v=v+'<span class="newarlina_meta_more newarlina_meta_more2"><a href="'+n+'" class="url" target ="_top">Read More...</a></span>'),document.write(v),document.write("</span>"),document.write("</li>")}document.write("</ul>"),document.write("</span>")} //]]>
</script>
<script type='text/javascript'> var numposts=1,numposts2=6,showpostthumbnails=!0,showpostthumbnails2=!1,displaymore=!1,displaymore2=!1,showcommentnum=!0,showcommentnum2=!1,showpostdate=!0,showpostdate2=!0,showpostsummary=!0,numchars=150,thumb_width=280,thumb_height=200,thumb_width2=62,thumb_height2=62,no_thumb="http://3.bp.blogspot.com/-PHzN2A92GHE/Vmim2TTkAII/AAAAAAAADZU/X42ioeFiyBo/s1600/newarlina_thumb.png",no_thumb2="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBHxhsIUoBk3FagD4B9DDS02CgwyIyrh81OGY8PIJbvRx4nDLimY7-gOfsOvx26sJYNeO6E7JXR99rICJAnSg2mDwS9uL4XPAEF5pSufZBwyXm4e8_RnB65lTrvFCEe2KBu6LXFcoGcFg5/s1600/newarlinathumb_small.png"; </script>
</b:if>
</b:if>

Bước 3: Sao chép mã dưới đây vào trước

<b:section class='main' id='main' maxwidgets='3' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='newarlinalabel1-wrapper'>
<b:section class='newarlinalabel1' id='newarlinalabel1' maxwidgets='1' showaddelement='yes'>
<b:widget id='HTML80' locked='false' title='Template' type='HTML'>
<b:includable id='main'>
<h2><span class='index'><a href='/search/label/<data:content/>?&max-results=8'>View All</a></span><data:content/></h2>
<div class='widget-content'>
<script>
document.write("<script src=\"/feeds/posts/default/-/<data:content/>?orderby=published&alt=json-in-script&callback=labelthumbs\"><\/script>"); </script>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
<div id='newarlinalabel2-wrapper'>
<b:section class='newarlinalabel2' id='newarlinalabel2' maxwidgets='1' showaddelement='yes'>
<b:widget id='HTML81' locked='false' title='Tips Blogger' type='HTML'>
<b:includable id='main'>
<h2><span class='index'><a href='/search/label/<data:content/>?&max-results=8'>View All</a></span><data:content/></h2>
<div class='widget-content'>
<script>
document.write("<script src=\"/feeds/posts/default/-/<data:content/>?orderby=published&alt=json-in-script&callback=labelthumbs\"><\/script>"); </script>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
</b:if>

Tiếp theo, trở ra phần Bố cục và thêm tiện ích vào, bạn gọi label ra, bằng cách điền tên label bạn muốn hiển thị theo nhãn.

Hướng dẫn tạo nút trở về đầu trang bằng jQuery

Nút trở về đầu trang (back to top hay là scrollTo Top) một ví dụ sử dụng jQuery là một sự cần thiết cho tất cả website hiện nay, tuy nhỏ nhưng rất có ích dành cho các bạn lười kéo chuột chỉ cần bấm vào link sẽ lên trên đầu trang web. Chức năng back to top rất tiện lợi cho người dùng thường được khách hàng yêu cầu khi xây dựng website.

Hôm nay trong bài này mình muốn hướng dẫn các bạn xây dựng tính năng này dựa trên nền jQuery. Miêu tả là khi ở đầu trang thì ta không thấy link back to top nhưng khi kéo xuống 1 đoạn sẽ thấy link và khi bấm nút go to top thì sẽ lên trên đầu trang đồng thời cũng mất đi link go scrollTo Top này.

1. Đầu tiên chúng ta chèn link back to top vào trong website, thường là ở dưới cùng còn năm trong thẻ body hay nói cách khác là trước thẻ đóng của body trong kịch bản HTML.

<a class="on_top" href="#top" style="display: block;"><i class="fa-arrow-circle-up fa"></i></a>

2. Sau đó chúng ta tiến hàn style CSS cho link chúng ta được đẹp mắt, bạn có thể dùng image, hay là FA icon cũng được tùy vào sở thích của mỗi người. Ví dụ này mình dùng FA Icon.

<style>
a.on_top { opacity:0.6; display: none;}
a.on_top:hover{
background-color: #007bb6;
color: #fff;
border: 1px solid #007bb6;
opacity:1;
}
a.on_top i{ font-size: 20px;}
a.on_top {
border-radius: 6px;
background-color: #333333;
padding: 10px 20px;
white-space: nowrap; color: #fff;
position: fixed;
bottom: 75px;
right: 30px;
height: 44px;
}
</style>

Lưu ý : display:none để khi load trang lên sẽ không thấy link go to top , position:fixed để khi bạn kéo thanh cuộn trang web thì link sẽ chạy theo ở 1 vị trí cố định nào đó.

3. Thư viện jQuery

<script>
$(document).ready(function(){
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('#on_top').fadeIn();
} else {
$('#on_top').fadeOut();
}
});
$('#on_top').click(function(){
$("html, body").animate({ scrollTop: 0 }, 600);
return false;
});
});
</script>

Giải thích 1 chút về đoạn code trên: $(this).scrollTop() > 100 tức là khi kéo xuống độ chừng 100px là sẽ xuất hiện link go to top, fadeIn: hiện, fadeOut: ẩn. Tiếp đến là bắt sự kiến Click và trược lên trên. OK như vậy là chúng ta đã hoàn thành tính năng back top top (Trờ về đầu trang). Chúc các bạn thành công.

Để dễ làm các bạn có thể đưa cả 3 code trên vào trong cùng 1 widget nhé.